/*
 * @Author: 凉月 1931226988@qq.com
 * @Date: 2023-04-18 11:24:26
 * @LastEditors: 凉月 1931226988@qq.com
 * @LastEditTime: 2023-04-18 21:19:38
 * @FilePath: \demo\js\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
console.log(dataIndex);

(function () {
    // 渲染页面
    // 顶部公告
    function loadingNotice() {
        let ul = $('.header_top_center_left ul')
        let newLists = ''
        dataIndex.notice.forEach(function (item) {
            newLists += `<li>${item}</li>`
        })
        ul.innerHTML = newLists
    }
    loadingNotice()

    // 顶部nav导航
    function loadingNav() {
        let ul = $('.header_bottom ul')
        let newLists = ``
        dataIndex.navs.forEach(function (item) {
            newLists += `<li>
                        <a href="#?class=${item.Mavic}">
                            <img src="${item.icon}"
                                alt="">
                            <div>${item.title}</div>
                        </a>
                    </li>`
        })
        ul.innerHTML = newLists
    }
    loadingNav()

    // 轮播图数据渲染
    function loadingSwiper() {
        let ul = $('.swiper ul:nth-child(1)')
        let ulLast = $('.swiper ul:last-child')
        let ulLastList = ``
        let newLists = ``
        dataIndex.banner.forEach(function (item) {
            newLists += `<li>
                        <a href="#?${item.id}">
                            <img src="${item.imgurl}" alt="" title="${item.title}">
                        </a>
                    </li>`
            ulLastList += `<li></li>`
        })
        ul.innerHTML = newLists
        ulLast.innerHTML = ulLastList
        ulLast.firstChild.className = 'active'
        ul.firstChild.className = 'selected'
    }
    loadingSwiper()

    // 新品渲染
    function loadingNew() {
        let ul = $('.content_top_top ul')
        let newLists = ``
        dataIndex.Mavic.new.forEach(function (item) {
            newLists += `<li>
                        <a href="#?id=${item.id}">
                            <div class="item_top">
                                <img class="item_top_a"
                                    src="${item.imgbg1}"
                                    alt="">
                                <img class="item_top_b"
                                    src="${item.imgbg2}"
                                    alt="">
                                <img class="item_top_c"
                                    src="${item.imghover}"
                                    alt="">
                            </div>
                            <div class="item_bottom">
                                <h2>${item.title}</h2>
                                <p class="item_bottom_a">${item.cnt}</p>
                                <p class="item_bottom_b">DJI FPV，
                                    ${item.description}</p>
                                <p class="item_bottom_c">
                                    ￥ ${item.price}
                                </p>
                            </div>
                        </a>
                    </li>`
        })
        ul.innerHTML = newLists
    }
    loadingNew()

    // 商品推荐video
    function loadingMain() {
        div = $('.content_bottom_top')
        let main = dataIndex.Mavic.main
        div.innerHTML = `<div class="content_bottom_top_left">
                            <a href="#?id=${main.id}">
                                <img src="${main.imgurl}"
                                    alt="">
                                <span>
                                    <h2>DJI MINI 2</h2>
                                    <p class="content_bottom_top_left_a">
                                        ${main.description}
                                    </p>
                                    <p class="content_bottom_top_left_b">
                                        ￥${main.price}
                                    </p>
                                </span>
                            </a>
                        </div>

                        <div class="content_bottom_top_right">
                            <video loop autoplay muted
                                src="${main.video}"
                                poster="${main.poster}"></video>
                        </div>`

    }
    loadingMain()

    // 商品列表模块
    function loadingLists() {
        ul = $('.content_bottom_bottom')
        newLists = ``
        dataIndex.Mavic.list.forEach(function (item) {
            newLists += `<li>
                        <a href="#?id=${item.id}">
                            <div class="content_bottom_bottom_top">
                                <img src="${item.imgbg}" alt="">
                                <div class="content_bottom_bottom_top_hover">
                                <img src="${item.imghover}" alt=""> 
                                    <p>
                                        ${item.description}
                                   </p>
                                </div>
                            </div>
                            <div class="content_bottom_bottom_bottom">
                                <p>
                                    ${item.title}
                                </p>
                                <p>
                                    ¥${item.price}
                                </p>
                            </div>
                        </a>
                    </li>`
        })
        ul.innerHTML = newLists
    }
    loadingLists()
})();


// 头部通告栏滚动
function Notice() {
    let div = $('.header_top_center_left div')
    let ul = $('.header_top_center_left div ul')
    let newNode = ul.firstChild.cloneNode(true)
    ul.appendChild(newNode)
    let index = 0
    console.log(ul.children.length)
    setInterval(function() {
        index++
        // 临界判断
        if(index >= ul.children.length) {
            index = 1
            div.scrollTop = 0
        }
        // 动画函数
        animate({
            el: div,
            attrs: {
                scrollTop: ul.firstChild.offsetHeight * index
            }
        })
    },2000)
}
Notice()

// 首页轮播图
function swiper() {
    let timer
    let index = 0   // 记录当前索引
    let lis = $('.swiper ul:nth-child(1) li')
    let lisBtm = $('.swiper ul:last-child li')
    let nextNode = $('.next')
    let prevNode = $('.previous')

    //先触发定时器
    time()

    // 下一张函数
    function next() {
        // 清楚定时器
        clearInterval(timer)

        // 切换
        $('.selected').className = ''
        $('.active').className = ''
        index++
        if(index === lis.length) {
            index = 0
        }
        lis[index].className = 'selected'
        lisBtm[index].className = 'active'
        

        // 从新启动定时器
        time()
    }

    // 上一张函数
    function prev() {
        // 清楚定时器
        clearInterval(timer)

        // 切换
        $('.selected').className = ''
        $('.active').className = ''
        index--
        if(index === -1) {
            index = lis.length - 1
        }
        lis[index].className = 'selected'
        lisBtm[index].className = 'active'
        

        // 从新启动定时器
        time()
    }
   
    // 自动播放函数
    function time() {
        timer = setInterval(function() {
            next()
        },3000)
    } 
    
    prevNode.onclick = function(e) {
        prev()
    }
    nextNode.onclick = function() {
        next()
    }
    
}
swiper()
